﻿@model thailandProject.Models.Pair<string, thailandProject.Models.Pair<thailandProject.Models.TASK, List<thailandProject.Models.TASKTYPE>>>

@{
    ViewBag.Title = "Edit Client";
}

<div id="Wrapper2">
    <div id="content_header">
        <div id="headerimage">
        </div>
        <div id="theheader">@ViewBag.Header</div>
    </div>
    <!-- Left Column begins here -->
    <aside id="sidebar-wrapper">
        <nav class="sidebar">
            <!-- CONTENT GOES HERE -->

    @using (Html.BeginForm("EditTask", "Home", FormMethod.Post, new { id = "editForm" }))
    {
        <div class="display-label">Task Name</div>
        <div class="display-field">
            <input type="hidden" id="taskId" name="taskId" value="@Model.value2.value1.taskID" />
            <input type="hidden" id="redirectURL" name="redirectURL" value="@Model.value1" />
            <input type="text" id="taskName" name="taskName" value="@Model.value2.value1.taskName" maxlength="100" />
            <div id="taskNameError" style="color:red; visibility:hidden">Task name must not be empty</div>
        </div>

        <div class="display-label">Due Date</div>
        <div class="display-field">
            <input type="text" id="taskDueDate" class="datepicker" name="taskDueDate" readonly="true" value="@Model.value2.value1.taskDueDate.ToShortDateString()" />
        </div>

        <div class="display-label">Task Type</div>
        <div class="display-field">
            <select id="taskTypeDrop" name="taskTypeId" 
                @if (Model.value2.value1.taskTypeID == 0)
                { @:disabled="disabled"
                }>
                @{
                //For this, if the task is a system generated type, it needs to display the "System Generated" type only
                //and be disabled. Otherwise, display all the other types
                if (Model.value2.value1.taskTypeID == 0)
                {
                        <option value="@Model.value2.value1.taskTypeID">
                            @Model.value2.value2.First().taskTypeName</option>
                }
                else
                {
                    foreach (var tt in Model.value2.value2)
                    {
                        if (tt.taskTypeID == 0)
                        {
                            continue; //Skip the System Generated type
                        }
                            
                            <option value="@tt.taskTypeID" @if (Model.value2.value1.TASKTYPE.taskTypeID == tt.taskTypeID)
                                                           { @:selected="selected"
                            }>@tt.taskTypeName</option>
                    }//End to foreach
                }
                }
            </select>
        </div>
        <div class="display-label">Task Time</div>
        <div class="display-field">
            <select id="taskTypeHour" name="taskTypeHour">
                @{
                int hour = Model.value2.value1.taskDueDate.Hour % 12; //Noon will become zero, 23 will become 11

                if (hour == 0)
                {
                    hour = 12;
                }

                for (int i = 1; i < 13; i++)
                {
                    //0 is midnight. 12 is noon. 23 is 11 PM
                    if (hour == i)
                    {
                            <option value="@i" selected="selected">@i</option>
                    }
                    else
                    {
                            <option value="@i">@i</option>
                    }
                }
                }
            </select>
            <select id="taskTypeMinute" name="taskTypeMinute">
                @for (int i = 0; i < 60; i++)
                {
                    if (Model.value2.value1.taskDueDate.Minute == i)
                    {
                        <option value="@i" selected="selected">@(i < 10 ? "0" + i : i + "")</option>
                    }
                    else
                    {
                        <option value="@i">@(i < 10 ? "0" + i : i + "")</option>
                    }
                }
            </select>
            <select id="taskTypeMeridian" name="taskTypeMeridian">
                @if (Model.value2.value1.taskDueDate.Hour > 11)
                {
                    <option value="AM">AM</option>
                    <option value="PM" selected="selected">PM</option>
                }
                else
                {
                    <option value="AM" selected="selected">AM</option>
                    <option value="PM">PM</option>
                }
            </select>
        </div>

        <div class="display-label">Description</div>
        <div class="display-field"> 
            <textarea id="taskDetailBox" name="taskDetails" >@Model.value2.value1.taskDetails</textarea>
        </div>
        
        <div class="formButtons">
            <input type="image" src="../../images/delete_button.png" id="delete" name="btnSubmit" value="Delete" />
            <input type="image" src="../../images/save_button.png" id="submitEdit" name="btnSubmit" value="Save" />
            <div id="formError" style="color:red; visibility:hidden">Please correct the above errors.</div>
        </div>
    }

<p>
    @Html.ActionLink("Back", "Index")
</p>

            
        </nav>
    </aside>
    <!-- Right column begins here -->
    <article id="contents">
        
    </article>
    <!-- Right column ends here -->
</div>
<!-- Div wrapper2 ends here -->

<script type = "text/javascript">
    $(function () {
        var date = $("#taskDueDate").val();
        var month = parseInt(date.substr(0, date.indexOf('/')));
        var day = parseInt(date.substr(date.indexOf('/') + 1, date.lastIndexOf('/')));
        var year = parseInt(date.substr(date.lastIndexOf('/') + 1, 4));

        $(".datepicker").datepicker({ minDate: new Date(year, month - 1, day) });
    });

    $("#editForm").submit(function () {

        var button = $("input[type=image][clicked=true]").val();

        if (button == "Save") {
            //Determine if a taskName has been entered

            if ($("#taskName").val() == "") {
                $("#submitEdit").attr('clicked', 'false');
                $("#taskNameError").attr('style', 'color:red; visibility:visible;');
                $("#formError").attr('style', 'color:red; visibility:visible;');
                $("#taskName").focus();
                return false;
            }
            else {
                $("#taskNameError").attr('style', 'color:red; visibility:hidden;');
                $("#formError").attr('style', 'color:red; visibility:hidden;');
                return true;
            }
        }
        else {
            //Show confirmation dialogue
            if (confirm("Are you sure?\n\nThis task will not be recoverable.")) {
                return true;
            }
            else {
                $("#delete").attr('clicked', 'false');
                return false;
            }
        }
    })

    $("form input[type=image]").click(function () {
        $("input[type=image]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
</script>